<template>
  <div>
    <el-dialog
      title="产品评价"
      :visible.sync="dialogvisible"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :show-close="true"
      width="80%"
      :before-close="handleClose"
    >
      <div class="tableList">
        <el-table :data="list" border style="width: 100%">
          <el-table-column type="index" label="排序" width="50"></el-table-column>
          <el-table-column prop="customerName" label="评价人名称" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="avatarUrl" label="评价人头像" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-image :src="scope.row.avatarUrl" style="width:80px;height:80px" :preview-src-list="[scope.row.avatarUrl]" />
            </template>
          </el-table-column>
          <el-table-column prop="commentLevel" label="5星评价" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="comment" label="评价内容" width="140" ></el-table-column>
          <el-table-column prop="imageUrls" label="评价图片" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-image
                v-for="imageUrl in scope.row.imageUrls"
                :key="imageUrl"
                :src="imageUrl"
                style="width:80px;height:80px" 
                :preview-src-list="[imageUrl]"
              />
            </template>
          </el-table-column>
          <el-table-column prop="commentTime" label="评价时间" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="extraCommentLevel"
            label="追加评价星级"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="extraComment" label="追加内容" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="extraImageUrls" label="追加图片" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-image
                v-for="imageUrl in scope.row.extraImageUrls"
                :key="imageUrl"
                :src="imageUrl"
                style="width:80px;height:80px" 
                :preview-src-list="[imageUrl]"
              />
            </template>
          </el-table-column>
          <el-table-column prop="extraCommentTime" label="追加时间" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="properties" label="产品的属性" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button @click="deleteProductComment(scope.row)" type="text" size="small">删除评价</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :total="total"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { get, postJson, postXform } from "@/utils/request.js";
export default {
  props: ["id", "visible"],
  watch: {
    id: function() {
      let that = this;
      if (that.id) {
        that.pageNum = 1; // 当前页数
        that.pageSize = 10;
        that.getList();
      }
    },
    visible: function() {
      let that = this;
      that.dialogvisible = this.visible;
    }
  },
  data() {
    return {
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表

      dialogvisible: false
    };
  },
  created() {},
  computed: {},
  methods: {
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      get("/product/pageProductComment", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        id: this.id
      }).then(res => {
        this.list = res.data.data.list;
        // 自定义下标
        this.list.forEach((e, idx) => {
          e.idx = (idx + 1) * this.pageNum;
          e.imageUrls = e.imageUrls
        });
        this.total = Number.parseInt(res.data.data.total);
        this.pageNum = res.data.data.pageNum;
      });
    },
    handleClose(done) {
      this.$emit("update:visible", false);
      done();
    },
    deleteProductComment(row) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          postXform("order/deleteComment", { id: row.id }).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getList();
          });
        })
        .catch();
    }
  }
};
</script>

<style lang="less"></style>
